<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>天气查询</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/index.css">

</head>
<style>
    .project {
        margin: 0 auto;
        padding-top: 50px;
    }

    .project .thumbnail {
        height: 366px;
    }
    .project .thumbnail div{
        margin: 0 auto;
        padding-top: 62px;
    padding-left: 50px;
    }
    .bt{
        padding-top: 100px;
        padding-left: 620px;
    }
    .cx {
        padding-top: 50px;
        padding-left: 440px;
        padding-right: 520px;
    }
    .btn{
        margin-top: 20px;

        margin-left: 260px;
    }
</style>

<body>

<div class="bt"><h3>天气查询：{{city_name}}</h3></div>
<div class="cx"><form action="/weather/{{username}}" method="get">
    <select name="city" class="form-control">
        <p>查询城市：
            {% for i in city %}
            <option value="{{i}}">{{i}}</option>
            {% endfor %}
        </p>
        <!--<button type="submit" class="btn btn-primary">确定</button>-->
<div class="qd">        <input type="submit" class="btn btn-primary" value="确定"></div>
    </select>

</form></div>
<div class="container">
    <div class="row project">
        <div class="col-md-3">
            <div class="thumbnail">
                <div>
                <h4>时间：{{today.date}}</h4>
                <h4>星期{{today.week}}</h4>
                <h4>天气：{{today.weather}}</h4>
                <h4>温度：{{today.temp}}</h4>
                <h4>风向：{{today.wind}}</h4>
                <h4>风力：{{today.power}}</h4>
                    </div>
            </div>
        </div>
        {% for i in future %}
        <div class="col-md-3">
            <div class="thumbnail">
                <div>
                <h4>时间：{{i.date}}</h4>
                <h4>星期{{i.week}}</h4>
                <h4>天气：{{i.weather}}</h4>
                <h4>温度：{{i.temp}}</h4>
                <h4>风向：{{i.wind}}</h4>
                <h4>风力：{{i.power}}</h4>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>


</body>
</html>